<template>
  <!--  :data="model?model:thePoses"-->
  <!--  {{thePoses}}-->

    <div :class="theClass" @click="console.log(`show the data1:`,theDatas)">


        <ul class="theUl">
          <draggable
                  :list="theDatas"
                  item-key="subId"
                  @end="(aa,bb,cc,dd)=>{console.log(`ended:`,aa,bb,cc,dd)}"
          >
              <template #item="{ element }">
                  <li>
                      {{ element.text }}
                  </li>
              </template>
          </draggable>
        </ul>


        <!--        :data="model?model:theFormPos.poses"-->

<!--                <ul class="theUl">-->
<!--&lt;!&ndash;                    <li v-for="(theData,idx) in theDatas" :key="theData.idx" :data-id="theData.subId">{{theData.text}}</li>&ndash;&gt;-->
<!--                    <li v-for="(theData,idx) in theDatas" :key="theData.idx" :data-id="theData.subId">{{theData.text}}</li>-->
<!--                </ul>-->



<!--        <ul class="theUl">-->
<!--            <li data-id="sub-2-1">stop</li>-->
<!--            <li data-id="sub-2-2">frustration</li>-->
<!--            <li data-id="sub-2-3">halt</li>-->
<!--            <li data-id="sub-2-4">prohibition</li>-->
<!--            <li data-id="sub-2-5">restraint</li>-->
<!--            <li data-id="sub-2-6">restraint1</li>-->
<!--        </ul>-->


        <!--      <el-table-->
        <!--          ref="theTableIn"-->
        <!--          :data="theDatas"-->
        <!--          :width="300"-->
        <!--          :border="true"-->
        <!--          :row-class-name="rowClassNameIt"-->
        <!--          row-key="subId">-->

        <!--        <el-table-column width="35"></el-table-column>-->
        <!--        <el-table-column width="80"></el-table-column>-->
        <!--        <el-table-column width="250" property="text" label="" sortable>-->
        <!--          &lt;!&ndash;            <template #default="theData">&ndash;&gt;-->
        <!--          &lt;!&ndash;                {{ theData }}&ndash;&gt;-->
        <!--          &lt;!&ndash;            </template>&ndash;&gt;-->
        <!--        </el-table-column>-->
        <!--        <el-table-column width="100"></el-table-column>-->
        <!--        <el-table-column width="99"></el-table-column>-->
        <!--      </el-table>-->
    </div>
    <div>
        <i class="fas fa-camera" @click="changedata(3,4)"></i> <!-- 举例一个相机图标 -->
        <i class="fas fa-arrow-up-wide-short" @click="changedata(2,4)"></i> <!-- 举例一个相机图标 -->
        <i class="fas fa-arrow-up-short-wide"></i> <!-- 举例一个相机图标 -->
        <i class="fas fa-arrow-down-short-wide"></i> <!-- 举例一个相机图标 -->
        <i class="fas fa-arrow-down-wide-short"></i> <!-- 举例一个相机图标 -->
        <i class="fas fa-arrows-up-down"></i> <!-- 举例一个相机图标 -->
    </div>

  <!--  {{model}}-->
</template>

<script setup>

import {defineModel, defineProps, getCurrentInstance, onMounted, reactive, ref} from "vue";
import Sortable from "sortablejs";
import draggable from "vuedraggable";

let theTableIn = ref();

function rowClassNameIt(aa, bb, cc, dd, ee, ff) {
    // getCurrentInstance()
    // console.log("rowClassNameIt:",aa,bb,cc,dd,ee,ff);
    // console.log("theTable:",theTable?.value?.$el?.querySelectorAll(".el-table__row")[aa.rowIndex]);
    theTableIn?.value?.$el?.querySelectorAll(".el-table__row")[aa.rowIndex]?.setAttribute("data-id", aa?.row?.subId)
    // console.log("theTable:",theTable?.value);
    return "";
}

let theDatas = reactive([
    // {subId: "1", text: 'stop', remarks: []},
    {subId: "sub-2-1", text: 'stop', remarks: [],idx:1},
    // {subId: "2", text: 'frustration', remarks: []},
    {subId: "sub-2-2", text: 'frustration', remarks: [],idx:2},
    // {subId: "3", text: 'halt', remarks: []},
    {subId: "sub-2-3", text: 'halt', remarks: [],idx:3},
    // {subId: "4", text: 'prohibition', remarks: []},
    {subId: "sub-2-4", text: 'prohibition', remarks: [],idx:4},
    // {subId: "5", text: 'restraint', remarks: []},
    {subId: "sub-2-5", text: 'restraint', remarks: [],idx:5},
    {subId: "sub-2-6", text: 'restraint1', remarks: [],idx:6},
])

//倒数第2，倒数第1互换，4->5,任意3210->5出错

const model = defineModel();
let props = defineProps(["theParentTable", "theFormPos"]);
let theClass = reactive({});
theClass[props.theFormPos?.form?.substring(0, props.theFormPos?.form?.length - 1)] = true;

let theRowSortable
const rowDrop = () => {
    // console.log("rowdrop");
    const instance = getCurrentInstance();
    // const tbody = document.querySelector('.compactPopover .el-table__body-wrapper tbody');
    // console.log("subtable instance:",instance);
    const tbody = instance?.ctx?.$el?.parentNode.querySelector(".theUl");
    console.log("the sub table model:", model);
    theRowSortable = Sortable.create(tbody, {
        // draggable: ".pwSubTable "+"."+props.theFormPos?.form?.substring(0,props.theFormPos?.form?.length-1)+" .el-table__row",
        draggable: ".theUl li",
        dataIdAttr: "data-id",
        group: props.theFormPos?.form ? props.theFormPos.form : "",
        animation: 100,
        onEnd(evt) {

            // let theData = model.value ? model.value : props.theFormPos.poses;
            // console.log("row dragged");
            const currRow = theDatas.splice(evt.oldIndex, 1)[0];
            theDatas.splice(evt.newIndex, 0, currRow);
            console.log("drag end", evt.oldIndex, evt.newIndex);
            // let showing  = [...document.querySelectorAll('.pwSubTable .'+props.theFormPos?.form?.substring(0,props.theFormPos?.form?.length-1)+' .el-table__row')].map(ele=>ele.textContent).join("\n");
            let showing = [...document.querySelectorAll('.theUl li')].map(ele => ele.textContent).join("\n");
            let datas = theDatas.map(ele => ele.text).join("\n");
            console.log("drag end", showing === datas);
        }
    });


    // theRowSortable.options.disabled = true;
}

function changedata(oldidx, newidx) {
    const currRow = theDatas.splice(oldidx, 1)[0];
    theDatas.splice(newidx, 0, currRow);
}


onMounted(() => {
    // console.log("DraggableElTable.vue mounted");
    // const instance = getCurrentInstance();
    // console.log("the instance,",instance)
    console.log("parent table:,", props.theParentTable, getCurrentInstance())
    // rowDrop();
})
</script>

<style scoped>
.fas {
    font-size: 12px;
}

.fas:hover {
    color: #1e55dc;
}

:global(.pwSubTable .el-table__header-wrapper) {
    display: none;

    :global(.cell) {
        line-height: 16px;
        text-align: right;
    }

    :global(.el-table .el-table__cell) {

    }
}
</style>